<template>
	<view class="container container-city-three-list" v-if="loaded">
		<view class="iheader">
            <block v-for="(item,index) in tabs" :key="index">
                <view 
                    class="li" 
                    :class="currentTab==index?'current':''" 
                    @click="onTabItemClick(index)"
                    v-if="!item.hidden"
                >
                    <text>{{item.name}}</text>
                </view>
            </block>
        </view>
        <view class="list" v-show="currentTab==0">
            <block v-for="(item,index) in tabs[0].list" :key="index">
                <view class="li" :class="currentProvince==index?'current':''" @click="onCityListItemClick(item,index)">
                    <text>{{item.name}}</text>
                </view>
            </block>
        </view>
        <view class="list" v-show="currentTab==1" v-if="currentProvince!=null">
            <block v-for="(item,index) in tabs[1].list" :key="index">
                <view class="li" :class="currentCity==index?'current':''" @click="onCityListItemClick(item,index)">
                    <text>{{item.name}}</text>
                </view>
            </block>
        </view>
        <view class="list" v-show="currentTab==2" v-if="currentCity!=null">
            <block v-for="(item,index) in tabs[2].list" :key="index">
                <view class="li" :class="currentArea==index?'current':''" @click="onCityListItemClick(item,index)">
                    <text>{{item.name}}</text>
                </view>
            </block>
        </view>
	</view>
</template>

<script>
    import WxNotificationCenter from '@/libs/WxNotificationCenter/wxnotificationcenter'
	import { JSMRequest } from '@/module/api'
	
	export default {
		data () {
			return {
                loaded: false,
                type: null,
                tabs: [
                    {
                        name: '请选择',
                        cache: null,
                        hidden: false,
                        list: [],
                    },
                    {
                        name: '请选择',
                        cache: null,
                        hidden: true,
                        list: [],
                    },
                    {
                        name: '请选择',
                        cache: null,
                        hidden: true,
                        list: [],
                    }
                ],
                currentTab: 0,
                currentProvince: null,
                currentCity: null,
                currentArea: null,
			}
        },
        computed: {
            userInfo() {
                return this.$store.state.userInfo;
            }
        },
		onLoad (options) {
            this.onPageRefresh('')
		},
		methods: {
			// 获取页面数据
			onPageRefresh (id) {
				let _t = this;
                
                uni.showLoading({
                    title: '加载中'
                });
				
				JSMRequest({
					tag: "jsm-city",
					method: "POST",
					params:{
					    pid: id
					},
				}).then(({data}) => {
					uni.hideLoading()
					_t.tabs[_t.currentTab].list = data;
					_t.loaded = true;
				}).catch(e => {
					console.log(e)
					uni.hideLoading();
					uni.showToast({
					    icon: 'none',
					    title: e.msg
					})
				})
            },

            // 返回
            onBackClick () {
                uni.navigateBack()
            },
            
            // 导航点击
            onTabItemClick (index) {
                this.currentTab = index
            },

            // 地区选择点击
            onCityListItemClick (item, index) {
                this.tabs[this.currentTab].cache = item;
                this.tabs[this.currentTab].name = item.name;
                this.tabs[this.currentTab].hidden = false;
                switch (this.currentTab) {
                    case 0 :
                        this.tabs[this.currentTab+1].name = '请选择';
                        this.tabs[this.currentTab+2].name = '请选择';
                        this.tabs[this.currentTab+1].cache = null;
                        this.tabs[this.currentTab+2].cache = null;
                        this.tabs[this.currentTab+1].hidden = false;
                        this.tabs[this.currentTab+2].hidden = true;
                        this.currentArea = null;
                        this.currentCity = null;
                        this.currentProvince = index;
                        this.currentTab++;
                        this.onPageRefresh(item.id)
                    break;
                    case 1 :
                        this.tabs[this.currentTab+1].name = '请选择';
                        this.tabs[this.currentTab+1].cache = null;
                        this.tabs[this.currentTab+1].hidden = false;
                        this.currentArea = null;
                        this.currentCity = index;
                        this.currentTab++;
                        this.onPageRefresh(item.id)
                    break;
                    case 2 :
                        this.currentArea = index;
                        this.handlePostNotification();
                        this.onBackClick()
                    break;
                }
            },
            
            // 广播数据
            handlePostNotification () {
                WxNotificationCenter.postNotificationName("refreshCityNotice", {
                    province: {
                        id: this.tabs[0].cache.id,
                        name: this.tabs[0].cache.name,
                        pid: this.tabs[0].cache.parent
                    },
                    city: {
                        id: this.tabs[1].cache.id,
                        name: this.tabs[1].cache.name,
                        pid: this.tabs[1].cache.parent
                    },
                    area: {
                        id: this.tabs[2].cache.id,
                        name: this.tabs[2].cache.name,
                        pid: this.tabs[2].cache.parent
                    }
                })
            }
		}
	}
</script>

<style lang="less" scoped>
	@red: #FF264C;
	
	.container-city-three-list{
	
	    .iheader{
	        background: #fff;
	        width: 100%;
	        height: 96px;
	        position: sticky;
	        z-index: 10;
	        top: 0;
	        left: 0;
	        display: flex;
	        flex-direction: row;
	        justify-content: flex-start;
	
	        .li{
	            width: 30%;
	            height: 100%;
	            display: flex;
	            align-items: center;
	            flex-direction: row;
	            justify-content: center;
	            position: relative;
	
	            text{
	                font-size: 28px;
	                color: #333;
	            }
	
	            &.current{
	
	                text{
	                    color: @red;
	                }
	
	                &:after{
	                    content: '';
	                    display: block;
	                    position: absolute;
	                    bottom: 0;
	                    left: 50%;
	                    margin-left: -16px;
	                    width: 32px;
	                    height: 8px;
	                    background: @red;
	                    border-radius: 4px;
	                }
	            }
	        }
	
	        &:after{
	            content: '';
	            display: block;
	            position: absolute;
	            top: 96px;
	            left: 0;
	            width: 100%;
	            height: 32px;
	            background:linear-gradient(180deg,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
	            opacity:0.05;
	        }
	    }
	
	    .list{
	        width: 100%;
	        padding-top: 32px;
	        padding-left: 48px;
	
	        .li{
	            width: 100%;
	            height: 80px;
	            display: flex;
	            align-items: center;
	            flex-direction: row;
	            justify-content: flex-start;
	            border-bottom: 1px solid #eee;
	
	            text{
	                font-size: 28px;
	                color: #333;
	            }
	
	            &.current{
	                border-color: @red;
	                
	                text{
	                    color: @red;
	                }
	            }
	        }
	    }
	}
</style>
